<template>
    <div id="tree-panel">
        <SceneTreePanel :treeData="treeData" @node-click="handleNodeClick">
        </SceneTreePanel>
    </div>
</template>

<script setup lang="ts">
import SceneTreePanel from './SceneTreePanel.vue'
import { onBeforeMount, onUpdated, onMounted, ref } from 'vue'
import { getobjm, getSceneObj, getSelectedBimModel } from '../scripts/getobjm'
import axios from "axios"

const treeData = ref(null)

const objm = getobjm()

// const eSWidget = objm.getSceneObject('esWidget1')
// // 设置初始位置
// // 显示面板信息
// eSWidget.info = {
//     "title": "基本信息",
//     "id": "054b82b7b2f5f6cf6533187bc98fe733",
//     "种类": "屋顶",
//     "科": "基本屋顶",
//     "体积": "570.84 m³",
// }
// eSWidget.show = true

onBeforeMount(() => {
    const selectedBimModel = getSelectedBimModel()
    console.log('select bim model ', selectedBimModel)
    axios.get(selectedBimModel.sceneTreeUrl).then(res => {
        treeData.value = res.data.scenes
        console.log('tree data from json : ', treeData)
    })
})



onUpdated(() => {
    const selectedBimModel = getSelectedBimModel()
    console.log('select bim model ', selectedBimModel)
    axios.get(selectedBimModel.sceneTreeUrl).then(res => {
        treeData.value = res.data.scenes
        console.log('tree data from json : ', treeData)
    })
})


onMounted(() => {
    setTimestamp()
    //   flyIn()
    const es3DTileset = getSceneObj(objm, "bim-model1")
    console.log('3dtileset ', es3DTileset)
    //   es3DTileset.flyTo()
})

function setTimestamp() {
    var now = new Date();
    now.setHours(12)
    objm.activeViewer.currentTime = now.getTime()
}


// 处理节点点击事件
const handleNodeClick = (node) => {
    console.log('node clicked ', node.id)
    const es3DTileset = getSceneObj(objm, "bim-model1")

    console.log('node ', node)
    es3DTileset.resetFeatureStyle()
    // es3DTileset.setFeatureColor(
    //     "id", [
    //     {
    //         value: node.id,
    //         rgba: [1, 0, 0, 1],
    //     },
    // ]
    // );
    es3DTileset.highlightFeatureAndFlyTo(node.id, node.sphere, 'rgba(255, 0, 0, 1)', 1)
};

// function getOrCreateSceneTree(objm: ESObjectsManager, id: string) {
//     const tree = objm.getSceneTree(id);
//     if(!tree) return tree ;
//     return objm.createSceneTree(id, 24);
// }
</script>

<style scoped src="../css/panel.css"></style>
<style scoped>
#tree-panel {
    position: absolute;
    box-sizing: border-box;
    left: 0px;
    top: 70px;
    width: 430px;
    height: 70%;
    background: #153651;
    border-radius: 8px;
    padding: 20px;
    color: #d6deea;
    animation-name: enter;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    box-shadow: 5px 5px 10px #181616
}
</style>